@{
    ViewData["Title"] = "采购入库管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/layui/css/layui.css">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div style="padding: 20px;">
        <div class="layui-card">
    <div class="layui-card-header">
        <h2>采购入库管理</h2>
    </div>
    <div class="layui-card-body">
        <!-- 查询条件 -->
        <div class="layui-form" lay-filter="searchForm">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">入库单编号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lnboundCode" placeholder="请输入入库单编号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">入库单名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="lnboundName" placeholder="请输入入库单名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-inline">
                        <input type="text" name="vendor" placeholder="请输入供应商名称" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">单据状态</label>
                    <div class="layui-input-inline">
                        <select name="documentStatus" lay-search>
                            <option value="">请选择状态</option>
                            <option value="0">草稿</option>
                            <option value="1">待入库</option>
                            <option value="2">已完成</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">入库日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startDate" placeholder="开始日期" class="layui-input" id="startDate">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">至</label>
                    <div class="layui-input-inline">
                        <input type="text" name="endDate" placeholder="结束日期" class="layui-input" id="endDate">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i> 查询
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-refresh"></i> 重置
                    </button>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="layui-form-item">
            <button class="layui-btn" id="btnAdd">
                <i class="layui-icon layui-icon-add-1"></i> 新增采购入库
            </button>
        </div>

        <!-- 数据表格 -->
        <table class="layui-hide" id="procurementTable" lay-filter="procurementTable"></table>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-group">
        {{#  if(d.documentStatus == 0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑">
            <i class="layui-icon layui-icon-edit"></i> 编辑
        </a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" title="删除">
            <i class="layui-icon layui-icon-delete"></i> 删除
        </a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="execute" title="修改状态">
            <i class="layui-icon layui-icon-ok"></i> 修改状态
        </a>
        {{#  } else if(d.documentStatus == 1) { }}
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="execute" title="执行入库">
            <i class="layui-icon layui-icon-ok"></i> 执行入库
        </a>
        {{#  } }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="details" title="查看明细">
            <i class="layui-icon layui-icon-list"></i> 明细
        </a>
    </div>
</script>

<!-- 状态模板 -->
<script type="text/html" id="statusTpl">
    {{#  if(d.documentStatus == 0){ }}
    <span class="layui-badge layui-bg-gray">草稿</span>
    {{#  } else if(d.documentStatus == 1){ }}
    <span class="layui-badge layui-bg-blue">待入库</span>
    {{#  } else if(d.documentStatus == 2){ }}
    <span class="layui-badge layui-bg-green">已完成</span>
    {{#  } else { }}
    <span class="layui-badge">未知</span>
    {{#  } }}
</script>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;

            // 初始化日期选择器
            laydate.render({
                elem: '#startDate',
                type: 'datetime'
            });

            laydate.render({
                elem: '#endDate',
                type: 'datetime'
            });

            // 初始化表格
            var tableIns = table.render({
                elem: '#procurementTable',
                url: '/Procurement/GetProcurements',
                toolbar: false,
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    { field: 'lnboundCode', title: '入库单编号', width: 200, sort: true, templet: function(d) { 
                        return '<a href="javascript:void(0)" class="layui-table-link" onclick="viewDetails(' + d.id + ')">' + d.lnboundCode + '</a>';
                    } },
                    { field: 'lnboundName', title: '入库单名称', width: 200 },
                    { field: 'vendor', title: '供应商', width: 150 },
                    { field: 'lnboundDate', title: '入库日期', width: 120, templet: function (d) { return formatDate(d.lnboundDate); } },
                    { field: 'lnboundWarehous', title: '仓库', width: 120 },
                    { field: 'totalAmount', title: '总金额', width: 100 },
                    { field: 'documentStatus', title: '状态', width: 100, templet: '#statusTpl' },
                    { fixed: 'right', title: '操作', toolbar: '#toolbarTpl', width: 250 }
                ]],
                page: true
            });

            // 查询
            form.on('submit(search)', function (data) {
                var field = data.field;
                tableIns.reload({
                    where: field,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 新增按钮
            $('#btnAdd').on('click', function () {
                layer.open({
                    type: 2,
                    title: '新增采购入库',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1500px', '1000px'],
                    content: '/Procurement/AddEdit',
                    end: function () {
                        tableIns.reload();
                    }
                });
            });

            // 表格工具栏事件
            table.on('tool(procurementTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    layer.open({
                        type: 2,
                        title: '编辑采购入库',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['1500px', '1000px'],
                        content: '/Procurement/AddEdit?id=' + data.id,
                        end: function () {
                            tableIns.reload();
                        }
                    });
                } else if (obj.event === 'delete') {
                    layer.confirm('确定删除这条记录吗？', function (index) {
                        $.post('/Procurement/DeleteProcurement', { id: data.id }, function (result) {
                            if (result.success) {
                                layer.msg('删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg(result.message || '删除失败');
                            }
                        });
                        layer.close(index);
                    });
                } else if (obj.event === 'details') {
                    layer.open({
                        type: 2,
                        title: '入库明细 - ' + data.lnboundCode,
                        shadeClose: true,
                        shade: 0.8,
                        area: ['1500px', '1000px'],
                        content: '/Procurement/Details?id=' + data.id
                    });
                } else if (obj.event === 'execute') {
                    // 根据当前状态显示不同的确认信息
                    var confirmMsg = data.documentStatus == 0 
                        ? '确定要将此入库单状态更改为待入库吗？' 
                        : '确定执行入库操作吗？入库后将更新库存且无法撤销。';
                    
                    layer.confirm(confirmMsg, function (index) {
                        $.post('/Procurement/ExecuteInbound', { id: data.id }, function (result) {
                            if (result.success) {
                                layer.msg(result.message || '操作成功');
                                tableIns.reload();
                            } else {
                                layer.msg(result.message || '操作失败');
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 格式化日期
            function formatDate(dateStr) {
                if (!dateStr) return '';
                var date = new Date(dateStr);
                return date.getFullYear() + '-' +
                    ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
                    ('0' + date.getDate()).slice(-2);
            }

            // 查看明细（全局函数）
            window.viewDetails = function(id) {
                layer.open({
                    type: 2,
                    title: '入库明细',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['1500px', '1000px'],
                    content: '/Procurement/Details?id=' + id
                });
            };
        });
    </script>
</div>
</body>
</html> 